﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-control" content="no-cache" />
    <meta http-equiv="Cache" content="no-cache" />
    <link href="../../css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../../css/smoothness/theme.css" />
    <link rel="stylesheet" href="../../css/smoothness/jquery-ui.min.css" />
    <script type="text/javascript" src="../../js/jquery-2.0.0.min.js"></script>
    <script type="text/javascript" src="../../js/jquery.json.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/jquery-ui.min.js"></script>
    <script type="text/javascript">

        //条件之间关系映射
        var RelationMapper = new Object();
        RelationMapper["and"] = "&&";
        RelationMapper["or"] = "||";

        //比较操作符的映射关系
        var CompareContionMapper = new Object();
        CompareContionMapper["eq"] = "==";
        CompareContionMapper["gt"] = ">";
        CompareContionMapper["lt"] = "<";
        CompareContionMapper["neq"] = "!=";

        var PropertyMapper = new Object();
        PropertyMapper[""] = "";
        PropertyMapper["value"] = "取值";
        PropertyMapper["text"] = "文本";
        PropertyMapper["color"] = "颜色";
        PropertyMapper["background-color"] = "背景色";
        PropertyMapper["disabled"] = "可用性";
        PropertyMapper["display"] = "可见性";
        PropertyMapper["font-family"] = "字体";
        PropertyMapper["font-size"] = "字体大小";

        //收集条件项的实体类
        var ConditionItemEntity = function () {
            this.ControlId = escape(eval("(" + $("#lsCT").find(".active").attr("configinfo") + ")").EName);
            this.ControlName = escape($("#lsCT").find(".active").html());
            this.ControlPropertyId = escape($("#selProperty").val());
            this.ControlPropertyName = escape($("#selProperty").find("option:selected").text());
            this.ConditionId = escape($("input[name=radioCondRelation]:checked").val() == "或者" ? "or" : "and");
            this.ConditionName = escape($("input[name=radioCondRelation]:checked").val());
            this.ConditionCompareId = escape($("#selConditionCompare").val());
            this.ConditionCompareName = escape($("#selConditionCompare").find("option:selected").text());
            this.CondDynValue = $("input[type='radio'][name=radioCondValue]:checked").attr("id");
            this.ValueControlId = escape($("#DynVallsCT").val());
            this.ValueControlName = escape($("#DynVallsCT").find("option:selected").text());
            this.ValuePropertyId = escape($("#DynVallsVal").val());
            this.ValuePropertyName = escape($("#DynVallsVal").find("option:selected").text());
            this.StaticValue = escape($("#txtStaticValDiv").val());
        }
       
        //条件的实体类
        var ConditionEntity = function () {
            this.Name = escape("自定义条件");
            this.Operations = new Array();  //当前关联的操作的数组
            this.Items = new Array(); //当前条件项的数组
            for (var i = 0; i < $("#selConditionItemExpress").find(".paramdiv").length; i++) {
                this.Items.push(eval("(" + $($("#selConditionItemExpress").find(".paramdiv")[i]).attr("exp") + ")"));
            }
        }

        //通过url参数的key得到value
        function GetParameter(param) {
            var ret = "";
            var ParamStrArr = location.href.split("?");
            if (ParamStrArr.length > 1) {
                var ParamsArr = ParamStrArr[1].split("&");
                if (ParamsArr.length > 0) {
                    for (var i = 0; i < ParamsArr.length; i++) {
                        var keyValueDic = ParamsArr[i].split("=");
                        if (keyValueDic.length > 0) {
                            var ParamKey = keyValueDic[0];
                            if (ParamKey.toLowerCase() == param.toLowerCase()) {
                                ret = keyValueDic[1];
                                return ret;
                            }
                        }
                    }
                }
            }
            return ret;
        }

        //将取值的表达式封装为jQuery表达式，便于统一管理
        function GetJQueryPropertyStr(propertyid) {
            var ret = "";
            if (propertyid == "value") {
                ret = "val()";
            } else if (propertyid == "text") {
                ret = "text()";
            } else if (propertyid == "background-color" || propertyid == "display" || propertyid == "font-family" || propertyid == "font-size") {
                ret = "css('" + propertyid + "')";
            } else {
                ret = "attr('" + propertyid + "')";
            }
            return ret;
        }


        //将操作项拼装成为操作表达式(请不要再方法中加双引号)
        //通用方法默认的两个参数，第一个为要操作的控件的ID，第二个为附加参数，为数组形式的以逗号分隔。
        function GetOperationItemJS(curOperation) {
            var ret = "";

            var param = "";
            for (var j = 0; j < curOperation.Params.length; j++) {
                var curParam = curOperation.Params[j];
                if (curParam.IsExpress) {
                    param += param == "" ? curParam.ValueControlId + "PointP." + GetJQueryPropertyStr(curParam.ValuePropertyId) : "SplitP," + curParam.ValueControlId + "PointP." + GetJQueryPropertyStr(curParam.ValuePropertyId);
                } else {
                    param += param == "" ? curParam.Param : "SplitP," + curParam.Param;
                }
            }
            ret += curOperation.FunctionId + "('" + curOperation.ControlId + "','" + param + "');";

            return ret;
        }

        //将条件项拼装成为条件表达式(请不要再方法中加双引号)
        function GetConditionItemJS(conditionItem) {
            //添加字符型数字转化为数字代码
            var ret = "FloatStringToFloat($('#" + conditionItem.ControlId + "')." + GetJQueryPropertyStr(conditionItem.ControlPropertyId) + ")";

            ret += " " + CompareContionMapper[conditionItem.ConditionCompareId] + " ";

            var tempExpress = "";
            if (conditionItem.IsExpress) {
                tempExpress = "$('#" + conditionItem.ValueControlId + "')." + GetJQueryPropertyStr(conditionItem.ValuePropertyId);
            } else {
                tempExpress = "'" + conditionItem.StaticValue + "'";
            }

            ret += "FloatStringToFloat(" + tempExpress + ")";
            return ret;
        }

        //得到最终表达式的方法，次方法必须暴露在外面，做为接口，以方便上级页面调用  shebin amend 2016-4-18
        //组装条件对象成为JS脚本的方法(请不要再方法中加双引号)
        function GetFinalExpress() {
            var ret = "";
            var retObj = new Object();
            retObj["expArr"] = new Array();
            for (var i = 0; i < $("#CondiAndOperC").find(".panel").length; i++) {
                var curCondiStr = $($("#CondiAndOperC").find(".panel")[i]).find(".condiName").attr("exp");
                if (curCondiStr == "" || curCondiStr == null) { //无条件操作
                    var condiObj = new ConditionEntity();
                    condiObj.Name = "无条件操作";
                    condiObj.Items = [];
                    var curOperElemArr = $($("#CondiAndOperC").find(".panel")[i]).find(".paramdiv");
                    for (var j = 0; j < curOperElemArr.length; j++) {
                        var curOperObj = eval("(" + $(curOperElemArr[j]).attr("exp") + ")");
                        condiObj.Operations.push(curOperObj);
                        ret += GetOperationItemJS(curOperObj);
                    }
                    retObj["expArr"].push(condiObj);
                } else {    //有条件操作
                    var curCondiObj = eval("(" + curCondiStr + ")");
                    //循环条件项
                    ret += "if (";
                    for (var j = 0; j < curCondiObj.Items.length; j++) {
                        var tmpConditionStr = "";
                        if (j == 0) {
                            tmpConditionStr += GetConditionItemJS(curCondiObj.Items[j]);
                        } else {
                            tmpConditionStr += " " + RelationMapper[curCondiObj.Items[j].ConditionId] + " " + GetConditionItemJS(curCondiObj.Items[j]);
                        }
                        ret += tmpConditionStr;
                    }
                    ret += ") {";
                    //该条件的操作循环操作
                    if (curCondiObj.Operations.length == 0) {
                        //do nothing
                    } else {
                        var tmpOperationStr = "";
                        for (var iItem = 0; iItem < curCondiObj.Operations.length; iItem++) {
                            var curOperation = curCondiObj.Operations[iItem];
                            if (curOperation != null) {
                                tmpOperationStr += GetOperationItemJS(curOperation);
                            }
                        }
                        ret += tmpOperationStr;
                    }
                    ret += "}"

                    retObj["expArr"].push(curCondiObj);
                }
            }
            retObj["expStr"] = $.toJSON(ret);
            return $.toJSON(retObj);
        }

        $(document).ready(function () {
            //得到当前控件ID
            var curC = parent.$("#txtEName").val();
            //得到当前事件表达式
            var curE = parent.$("#" + GetParameter("EventC")).val();

            //将控件的常用属性绑定到列表上，由于多出用到，所以以样式作为选择器
            function BindPropertyToControls() {
                var innerStr = "";
                for (var p in PropertyMapper) {
                    innerStr += "<option value='" + p.toString() + "'>" + PropertyMapper[p] + "</option>"
                }
                $(".PropMapper").html(innerStr);
            }

            //新的条件项
            var staOrDynValue = "";
            function CreateConditionItemOption(curCondItem) {
                if ($("#radioCondStaticValue").prop("checked") || curCondItem.CondDynValue == "radioCondStaticValue") {
                    if (curCondItem.StaticValue == "") {
                        staOrDynValue = "空";
                    }
                    else {
                        staOrDynValue = curCondItem.StaticValue;
                    }
                }
                else {
                    staOrDynValue = unescape(curCondItem.ValueControlName) + " " + unescape(curCondItem.ValuePropertyName);
                }
                var innerStr = "";
                innerStr = "<div class='paramdiv' exp=" + $.toJSON(curCondItem) + " ><span class='label label-success paramspan'>" + unescape(curCondItem.ConditionName) + " " + unescape(curCondItem.ControlName) + " " + unescape(curCondItem.ControlPropertyName) + " " + unescape(curCondItem.ConditionCompareName) + " " + unescape(staOrDynValue) + "</span><a href='#' class='deleteRow' style='float:right' title='删除' ><span class='glyphicon glyphicon-remove' style='color:red' ></span></a></div>";
                return innerStr;
            }

            //根据表达式还原title
            function ReCreatTitle(curCondItem) {
                if ($("#radioCondStaticValue").prop("checked") || curCondItem.CondDynValue == "radioCondStaticValue") {
                    if (curCondItem.StaticValue == "") {
                        staOrDynValue = "空";
                    }
                    else {
                        staOrDynValue = curCondItem.StaticValue;
                    }
                }
                else {
                    staOrDynValue = unescape(curCondItem.ValueControlName) + " " + unescape(curCondItem.ValuePropertyName);
                }
                var curtitle = "";
                curtitle = unescape(curCondItem.ConditionName) + " " + unescape(curCondItem.ControlName) + " " + unescape(curCondItem.ControlPropertyName) + " " + unescape(curCondItem.ConditionCompareName) + " " + unescape(staOrDynValue);
                return curtitle;
            }

            //点击删除
            $("body").delegate(".deleteRow", "click", function (e) {
                $(this).parent().remove();
                return false;
            })

            $(".panel-body").delegate(".deleteDiv", "click", function (e) {
                $(this).parent().parent().remove();
                return false;
            })

            //定义条件的添加按钮
            $("#btnCondAdd").click(function () {
                if ($(this).text() == "添加") {
                    if ($("#lsCT").find(".active").length < 1) {
                        alert("请选择一个条件控件");
                        return false;
                    }
                    else if ($("#selProperty").val() == "" || $("#selConditionCompare").val()=="") {
                        alert("请选择性质和条件");
                        return false;
                    }
                    else if ($("#radioCondDynValue").prop("checked")) {
                        if ($("#DynVallsCT").val() == "" || $("#DynVallsVal").val() == "") {
                            alert("请选择目标控件和属性");
                            return false;
                        }
                    }
                    var curCondItem = new ConditionItemEntity();

                    var innerDivStr = $("#selConditionItemExpress").html() + CreateConditionItemOption(curCondItem);
                    $("#selConditionItemExpress").html(innerDivStr);
                    return false;
                }
                else {
                    //选中条件项变为修改按钮
                    var curCondItem = new ConditionItemEntity();
                    var innerDivStr = CreateConditionItemOption(curCondItem);
                    $("#selConditionItemExpress").find(".label-primary").parent().replaceWith(innerDivStr);
                    $("#btnCondAdd").text("添加");
                    return false;
                }
                
            });

            //定义条件的保存按钮
            $("#btnCondSave").click(function () {
                if ($("#selConditionItemExpress").find("div").length < 1) {
                    alert("请添加条件项");
                }
                else {
                    var curExp = new ConditionEntity();
                    var curConditionDivArr = $("#selConditionItemExpress").find(".paramdiv");
                    var panelTitle = "";
                    curConditionDivArr.each(function (i) {
                        panelTitle += $(this).text() + "\r\n";
                    });
                    if ($("#divAll").find(".panel-primary").length < 1) {
                        //如果没有选择panel，则自动生成一个panel
                        var outerStr = '<div class="panel panel-success" style="margin-top:10px; min-height:50px">';
                        outerStr += '<div class="panel-heading"><span class="condiName" exp=' + $.toJSON(curExp) + ' title="' + panelTitle + '">' + unescape(curExp.Name) + '</span><a href="#" style="float:right" class="deleteDiv" ><span class="glyphicon glyphicon-trash" style="color:red"></span></a></div>';
                        outerStr += '<div class="panel-body">';
                        outerStr += '</div></div>';
                        $("#CondiAndOperC").append(outerStr);
                    }
                    else {
                        //如果当前有选中的Panel，则修改
                        $(".panel-primary").find(".condiName").attr("exp", $.toJSON(curExp));
                        $(".panel-primary").find(".condiName").attr("title", panelTitle);
                        $(".panel-primary").addClass("panel-success");
                        $(".panel-primary").removeClass("panel-primary");
                    }
                    $("#btnCondAdd").text("添加");
                    $("#selConditionItemExpress").find(".paramdiv").remove();
                }
                return false;
            });

            //双击修改条件名称
            $(".panel-body").delegate(".condiName", "dblclick", function (e) {
                var td = $(this); 
                var txt = td.text(); 
                var input = $("<input type='text' value='" + txt + "'/>"); 
                td.html(input); 
                input.click(function() { return false; }); 
                input.trigger("focus"); 
                //文本框失去焦点后提交内容，重新变为文本 
                input.blur(function () {
                    var newtxt = $(this).val();
                    td.html(newtxt);
                });
            });

            //根据表达式还原事件界面
            var reShowEvent = function () {
                //判断下是否有事件还原 add by chengl
                if (curE == "") return;
                var curExpArr = eval("(" + curE + ")").expArr;
                for (var i = 0; i < curExpArr.length; i++) {
                    var innerArr = curExpArr[i].Operations;
                    var newCondItem = curExpArr[i].Items;
                    var panelTitle = "";
                    for (var h = 0; h < newCondItem.length; h++) {
                        panelTitle += ReCreatTitle(newCondItem[h]) + "\r\n";
                    }
                    for (var j = 0; j < innerArr.length; j++) {
                        var innerStr = CreateHOperationItemExpress(innerArr[j]);
                    }
                    for (var k = 0; k < curExpArr.length; k++) {
                        var curExp = curExpArr[k];
                    }
                    var outerStr = '<div class="panel panel-success" style="margin-top:10px; min-height:50px">';
                    outerStr += '<div class="panel-heading"><span class="condiName" exp=' + $.toJSON(curExp) + ' title="' + panelTitle + '">' + unescape(curExpArr[i].Name) + '</span><a href="#" style="float:right" class="deleteDiv" ><span class="glyphicon glyphicon-trash" style="color:red"></span></a></div>';
                    outerStr += '<div class="panel-body">';
                    outerStr += innerStr;
                    outerStr += '</div></div>';
                    $("#CondiAndOperC").append(outerStr);
                }
                return false;
            }

            //将界面的控件添加到事件配置中
            var LoadPageControls = function () {
                var pageControls = $(parent.document).find("#mainContent").find("[controlType]");
                //绑定到左侧主列表
                var innerLsStr = "";
                var innerSelStr = "<option value=''></option>";
                for (var i = 0; i < pageControls.length; i++) {
                    var ctrlInfo = eval("(" + $(pageControls[i]).attr("ConfigInfo") + ")");
                    var curCName = ctrlInfo.EName;
                    switch ($(pageControls[i]).attr("controlType"))
                    {
                        case "text":
                        case "number":
                        case "date":
                        case "time":
                        case "select":
                        case "email":
                        case "dictionary":
                        case "label":
                        case "line":
                        case "panel":
                            {
                                curCName = unescape(ctrlInfo.CName);
                                break;
                            }
                        default:
                            {
                                break;
                            }
                    }
                    var cls = curC == ctrlInfo.EName ? "class = 'list-group-item active'" : "class = 'list-group-item'";
                    innerLsStr += "<a href='#' ConfigInfo='" + $.toJSON(ctrlInfo) + "' style='word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;' " + cls + " title='" + $(pageControls[i]).attr("controlType") + " - " + curCName + "'>" + $(pageControls[i]).attr("controlType") + " - " + curCName + "</a>";
                    innerSelStr += "<option value='" + ctrlInfo.EName + "' ConfigInfo='" + $.toJSON(ctrlInfo) + "' controltype='" + $(pageControls[i]).attr("controlType") + "'>" + $(pageControls[i]).attr("controlType") + " - " + curCName + "</option>";
                }
                //选中左侧主列表的式样控件
                $("#lsCT").html(innerLsStr).find("a").click(function () {
                    $("#lsCT").find("a").removeClass("active");
                    $(this).addClass("active");
                });

                $("#DynParamlsCT, #DynVallsCT").html(innerSelStr);

                //添加控件属性选项
                BindPropertyToControls();
            }

            $("#myTab").tabs();

            $("#selFuncName").popover({
                trigger: "manual"
            }).on('change', function () {
                // 隐藏
                $(this).popover('show');
                $("#divFuncContent").html($(this).find("option:selected").attr("Intro"));
            }).on('blur', function () {
                // 失去焦点时显示
                $(this).popover('hide');
                $("#divFuncContent").text("");
            }).on('dblclick', function () {
                $(this).popover('show');
                $("#divFuncContent").html($(this).find("option:selected").attr("Intro"));
            });
            $("#lsCT").find("a").click(function () {
                $("#lsCT").find("a").removeClass("active");
                $(this).addClass("active");
            });

            //动态条件和静态条件的选择
            $("input[name=radioCondValue]").click(function () {
                $(this).prop("checked",true);
                if ($("#radioCondStaticValue").prop("checked")) {
                    $("#DynVallsCT").val("");
                    $("#DynVallsVal").val("");
                    $("#DynValDiv").hide();
                    $("#StaticValDiv").show();
                } else {
                    $("#txtStaticValDiv").val("");
                    $("#StaticValDiv").hide();
                    $("#DynValDiv").show();
                }
            });

            //动态值和静态值得选择
            $("input[name=radioParamValue]").click(function () {
                if ($("#radioParamStaticValue").prop("checked")) {
                    $("#DynParamDiv").hide();
                    $("#StaticParamDiv").show();
                } else {
                    $("#StaticParamDiv").hide();
                    $("#DynParamDiv").show();
                }
            });

            //自定义条件panel点击事件
            function PanelClickFun(typedPanel) {
                if (typedPanel.attr("class").indexOf("panel-primary") > -1) {
                    if (typedPanel.find(".border").length < 1) {
                        typedPanel.removeClass("panel-primary");
                        typedPanel.addClass("panel-success");
                        $("#selConditionItemExpress").find(".paramdiv").remove();
                        $("#btnCondAdd").text("添加");
                    }
                } else {
                    $("#divAll").find(".panel").removeClass("panel-primary");
                    $("#divAll").find(".panel").addClass("panel-success");
                    typedPanel.removeClass("panel-success");
                    typedPanel.addClass("panel-primary");
                    //可能是无条件操作，所以这里需要判断下  shebin amend 2016-4-19
                    if (typedPanel.find(".condiName").attr("exp") != "") {
                        var newExp = eval("(" + typedPanel.find(".condiName").attr("exp") + ")");
                        var newCondItem = newExp.Items;
                        var innerDivStr = "";
                        for (var i = 0; i < newCondItem.length; i++) {
                            innerDivStr += CreateConditionItemOption(newCondItem[i]);
                        }
                        $("#selConditionItemExpress").html(innerDivStr);
                    }
                    
                }
            }

            $("#divAll").delegate(".panel", "click", function (e) {
                PanelClickFun($(this));
            });

            //条件项点击事件
            $("#selConditionItemExpress").delegate(".label", "click", function () {
                if ($(this).attr("class").indexOf("label-primary") > -1) {
                    $(this).removeClass("label-primary");
                    $(this).addClass("label-success");
                    $("#btnCondAdd").text("添加");
                } else {
                    $("#selConditionItemExpress").find(".label").removeClass("label-primary");
                    $("#selConditionItemExpress").find(".label").addClass("label-success");
                    $(this).removeClass("label-success");
                    $(this).addClass("label-primary");
                    $("#btnCondAdd").text("修改");
                    var labelInfo = eval("(" + $(this).parent().attr("exp") + ")");

                    $("#radio"+labelInfo.ConditionId+"").click();
                    $("#selProperty").val(labelInfo.ControlPropertyId);
                    $("#selConditionCompare").val(labelInfo.ConditionCompareId);
                    $("#" + labelInfo.CondDynValue + "").click();
                    if (labelInfo.CondDynValue == "radioCondDynValue") {
                        $("#DynVallsCT").val(labelInfo.ValueControlId);
                        $("#DynVallsVal").val(labelInfo.ValuePropertyId);
                    }
                    else {
                        $("#txtStaticValDiv").val(labelInfo.StaticValue);
                    }
                    $("#lsCT a").each(function(i,d){
                        var configInfoStr=$(d).attr("configinfo");
                        var configObj=eval( "(" + configInfoStr + ")" );
                        var curEname = configObj.EName;
                        if(curEname==labelInfo.ControlId)
                        {
                            $(d).click();
                            return false;
                        }

                    })
                }
            });

            //最终的操作项点击的时候的事件
            $("#divAll").delegate(".paramdiv", "click", function (e) {
                var flag = $(this).hasClass("border");
                $("#divAll").find(".paramdiv").removeClass("border");
                //清除当前的操作参数
                $("#OperParamList").html("");
                if (!flag) {
                    $(this).addClass("border");
                    //添加当前操作项的操作参数
                    var expStr = $(this).attr("exp");
                    var expObj = eval("(" + expStr + ")");
                    for (var i = 0; i < expObj.Params.length; i++) {
                        var innerStr = CreateOperParamExpress(expObj.Params[i]);
                        $("#OperParamList").append(innerStr);
                    }
                }
                //让他冒泡
                //return false;
            })

            //操作项的参数
            var OperationItemParamEntity = function () {
                this.IsExpress = $("#radioParamDynValue").prop("checked");//此处不能escape，否则IsExpress恒为真
                this.ValueControlId = escape($("#DynParamlsCT").val());
                this.ValueControlName = escape($("#DynParamlsCT").find("option:selected").text());
                this.ValuePropertyId = escape($("#DynParamlsProp").val());
                this.ValuePropertyName = escape($("#DynParamlsProp").find("option:selected").text());
                this.Param = escape($("#StaticParamVal").val());
            }

            //收集操作项的实体类
            var OperationItemEntity = function () {
                var curObj = eval("(" + $("#lsCT").find(".active").attr("ConfigInfo") + ")");
                this.ControlId = escape(curObj.EName);
                this.ControlName = escape($("#lsCT").find(".active").text());
                this.FunctionType = escape($("#selFuncType").val());
                this.FunctionId = escape($("#selFuncList").val());
                this.FunctionName = escape($("#selFuncList").find("option:selected").text());
                this.Params = new Array();
                for (var i = 0; i < $("#OperParamList").find(".paramdiv").length; i++) {
                    this.Params.push(eval("(" + $($("#OperParamList").find(".paramdiv")[i]).attr("exp") + ")"));
                }
            }

            //将函数绑定到UI
            var BindFuncToUI = function (parFuncList) {
                var innerStr = "";
                for (var i = 0; i < parFuncList.length; i++) {
                    innerStr += "<option value='" + parFuncList[i].FuncName + "'>" + parFuncList[i].FuncCaption + "</option>";
                }
                $("#selFuncList").html(innerStr);
            }
            //函数类型变化的时候，加载对应的函数列表
            $("#selFuncType").change(function () {
                $.ajax({
                    type: "POST",
                    url: "../../FormDesign/QueryByFuncType",
                    data: { FuncType: $(this).val() },
                    success: function (msg) {
                        if (msg.Result) {
                            BindFuncToUI(msg.Data);
                        } else {
                            
                        }
                    },
                    error: function (r, s, e) {
                        DialogOKSimple("出错：" + e);
                    }

                });
            });

            var InitUI = function () {
                //加载界面控件列表
                LoadPageControls();
                reShowEvent();
                //加载函数库分类
                $("#selFuncType").change();
            }

            //拼装执行表达式的汉化表达式
            function CreateHOperationItemExpress(curOperationItem) {
                var expressStr = "对控件 ";
                expressStr += unescape(curOperationItem.ControlName) + "  使用 ";
                expressStr += unescape(curOperationItem.FunctionName) + " 参数为 ";

                var paramStr = "[";
                if (curOperationItem.Params != null) {
                    for (var i = 0; i < curOperationItem.Params.length; i++) {
                        var curParam = curOperationItem.Params[i];
                        if (curParam.IsExpress) {
                            paramStr += paramStr == "[" ? unescape(curParam.ValueControlName) + " 的 " + unescape(curParam.ValuePropertyName) : "," + unescape(curParam.ValueControlName) + " 的 " + unescape(curParam.ValuePropertyName);
                        } else {
                            paramStr += paramStr == "[" ? unescape(curParam.Param) : "," + unescape(curParam.Param);
                        }
                    }
                }

                paramStr += "]";

                expressStr += paramStr;

                expressStr = '<div style="height:auto !important; height:25px; min-height:25px; margin-bottom:5px;" title="' + expressStr + '" class="paramdiv" exp=' + $.toJSON(curOperationItem) + '>' + expressStr + '<a href="#" class="deleteRow" style="float:right" title="删除" ><span class="glyphicon glyphicon-remove" style="color:red" ></span></a></div>';
                return expressStr;
            }

            //由参数实体，转化为实体的汉语表达式
            function CreateOperParamExpress(parOperParam) {
                var innerStr = "";
                if (parOperParam.IsExpress) {
                    innerStr = unescape(parOperParam.ValueControlName) + " 的 " + unescape(parOperParam.ValuePropertyName);
                } else {
                    innerStr = parOperParam.Param == null || parOperParam.Param == "" ? "NULL" : unescape(parOperParam.Param);
                }
                innerStr = '<div class="paramdiv" exp=' + $.toJSON(parOperParam) + '><span class="label label-success paramspan"> ' + innerStr + '</span> <a href="#" class="deleteRow" style="float:right" title="删除" ><span class="glyphicon glyphicon-remove" style="color:red" ></span></a></div>';
                return innerStr;
            }

            //添加操作参数
            $("#btnOperParamAdd").click(function () {
                var curOperParam = new OperationItemParamEntity();
                var innerStr = CreateOperParamExpress(curOperParam);
                $("#OperParamList").append(innerStr);
                return false;
            });

            //保存操作
            $("#btnOperSave").click(function () {
                if ($("#lsCT").find(".active").length != 1) {
                    alert("请选择一个控件！");
                    return false;
                } else {
                    var curOperObj = new OperationItemEntity();
                    var innerStr = CreateHOperationItemExpress(curOperObj);
                    var curCondiPanel = $("#CondiAndOperC").find(".panel-primary");
                    if (curCondiPanel.length > 0) {    //如果当前有选中的Panel，则修改
                        var curConditionStr = curCondiPanel.find(".panel-heading").find(".condiName").attr("exp");
                        if (curCondiPanel.find(".border").length > 0) { //如果有选中的操作，则更新操作
                            curCondiPanel.find(".border").replaceWith(innerStr);
                        } else {    //如果没有选中任何操作，则添加新的操作
                            curCondiPanel.find(".panel-body").append(innerStr);
                        }
                        //更新当前条件下的所有操作
                        var curCondtionObj = curConditionStr == "" ? null : eval("(" + curConditionStr + ")");
                        if (curCondtionObj != null) {
                            curCondtionObj.Operations = [];
                            for (var i = 0; i < curCondiPanel.find(".paramdiv").length; i++) {
                                curCondtionObj.Operations.push(eval("(" + $(curCondiPanel.find(".paramdiv")[i]).attr("exp") + ")"));
                            }
                            curCondiPanel.find(".panel-heading").find(".condiName").attr("exp", $.toJSON(curCondtionObj))
                        }

                    } else {   //如果当前没有选中的Panel，则认为是无条件的操作
                        var outerStr = '<div class="panel panel-success" style="margin-top:10px; min-height:50px">';
                        outerStr += '<div class="panel-heading"><span class="condiName" exp="" title="无条件操作">无条件操作</span><a href="#" style="float:right" class="deleteDiv" ><span class="glyphicon glyphicon-trash" style="color:red"></span></a></div>';
                        outerStr += '<div class="panel-body">';
                        outerStr += innerStr;
                        outerStr += '</div></div>';
                        $("#CondiAndOperC").append(outerStr);
                    }
                    return false;
                }

            });
            InitUI();
        });
    </script>
    <style type="text/css">
        #condPropTable td
        {
            
        }
        #condPropTable td select
        {
            width:150px;
        }
        .popover {
          max-width:1300px;
        }
        .paramdiv
        {
            width:100%; 
            height:22px;
            cursor:pointer;
        }
        .border
        {
            border:1px solid #ddd;
        }
        .paramspan
        {
            width:500px; 
            display:block;
            float:left;
            text-align:left;
        }
    </style>
</head>
<body>
    <table class="table">
        <tr>
            <td valign="top" style="width:250px; height:420px;">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            控件列表
                        </h3>
                    </div>
                    <div id="lsCT" class="panel-body" style="height:400px; overflow:auto;">
                        
                    </div>
                </div>
            </td>
            <td>
                <div>
                    <div id="myTab">
                        <!-- 导航 -->
                        <ul>
                            <li class="active">
                                <a href="#condProp" data-toggle="tab">定义条件</a>
                            </li>
                            <li>
                                <a href="#operProp" data-toggle="tab">定义操作</a>
                            </li>
                        </ul>
                        <!-- 内容 -->
                        <form class="form-inline" role="form">
                            <div id="condProp" style="height:160px">
                                <table id="condPropTable">
                                    <tr>
                                        <td>
                                            <div class="form-group">
                                                <input id="radioand" type="radio" checked="checked" name="radioCondRelation" value="并且" /> <label for="radioand">并且</label>
                                                <input id="radioor" type="radio" name="radioCondRelation" value="或者"/> <label for="radioor">或者</label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <input id="radioCondStaticValue" type="radio" checked="checked" name="radioCondValue" /> <label for="radioCondStaticValue">静态值</label>
                                                <input id="radioCondDynValue" type="radio" name="radioCondValue" /> <label for="radioCondDynValue">控件值</label>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="form-group" style="width:270px">
                                                <select id="selProperty" class="form-control PropMapper" style="width:130px;">
                                                    
                                                </select>
                                                <select id="selConditionCompare" class="form-control" style="width:130px;">
                                                    <option value=""></option>
                                                    <option value="eq">等于</option>
                                                    <option value="gt">大于</option>
                                                    <option value="lt">小于</option>
                                                    <option value="neq">不等于</option>
                                                </select>
                                            </div>
                                        </td>
                                        <td>
                                            <div id="DynValDiv" class="form-group" style="width:270px; display:none">
                                                <select id="DynVallsCT" class="form-control" style="width:130px;">
                                                </select>
                                                <select id="DynVallsVal" class="form-control PropMapper" style="width:130px;">
                                                </select>
                                            </div>
                                            <div id="StaticValDiv" class="form-group" style="width:270px">
                                                <input id="txtStaticValDiv" type="text" class="form-control" style="width:265px" placeholder="方法参数"/>
                                            </div>
                                        </td>
                                        <td style="padding-left:10px">
                                            <button id="btnCondAdd" class="btn btn-primary">添加</button>
                                            <button id="btnCondSave" class="btn btn-success">保存</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" valign="top">
                                            <div id="selConditionItemExpress" style="width:100%; height:80px; overflow-y:auto">

                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div id="operProp" style="height:160px">
                                <table id="operPropTable">
                                    <tr>
                                        <td>
                                            <!--<div style="padding-bottom:10px"><span class="label label-primary">操作方法</span></div>-->
                                            <!--<div style="padding-bottom:10px"><strong>操作方法</strong></div>-->
                                            <div style="width:270px;height:27px;">

                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group" style="display:block">
                                                <input id="radioParamStaticValue" type="radio" checked="checked" name="radioParamValue" /> <label for="radioParamStaticValue">静态值</label>
                                                <input id="radioParamDynValue" type="radio" name="radioParamValue" /> <label for="radioParamDynValue">控件值</label>
                                            </div>
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="form-group" style="width:270px;">
                                                <select id="selFuncType" class="form-control" style="width:130px;">
                                                    <option value="功能函数">功能函数</option>
                                                    <option value="计算函数">计算函数</option>
                                                    <option value="系统函数">系统函数</option>
                                                </select>
                                                <select id="selFuncList" style="width:130px;" class="form-control" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true" data-content="<div id='divFuncContent'></div>">
                                                </select>
                                            </div>
                                        </td>
                                        <td>
                                            <div id="DynParamDiv" class="form-group" style="width:270px; display:none">
                                                <select id="DynParamlsCT" class="form-control"  style="width:130px">
                                                </select>
                                                <select id="DynParamlsProp" class="form-control PropMapper"  style="width:130px">
                                                </select>
                                            </div>
                                            <div id="StaticParamDiv" class="form-group" style="width:270px; display:block">
                                                <input id="StaticParamVal" type="text" class="form-control" style="width:265px"  placeholder="方法参数"/>
                                            </div>
                                            <div id="selParamsArr"></div>
                                        <!--<td valign="top">
                                            <div id="Div2" class="form-group" style="width:200px; display:block;">
                                                <select class="form-control" style="width:180px; height:100px" multiple=multiple>

                                                </select>
                                            </div>
                                        </td>-->
                                        </td>
                                        <td style="padding-left:10px">
                                            <button id="btnOperParamAdd" class="btn btn-primary">添加参数</button>
                                            <button id="btnOperSave" class="btn btn-success">保存</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" valign="top">
                                            <div id="OperParamList" style="width:100%; height:80px; overflow-y:auto">
                                                
                                            </div>
                                        </td>
                                        <td></td>
                                    </tr>
                                </table>
                            </div>
                        </form>
                    </div>
                    <div id="divAll" class="panel panel-default" style="margin-top:10px; height:220px; overflow:auto">
                        <div id="CondiAndOperC" class="panel-body">
                            
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>